<template>
  <view class="ZZYChoose">
    <view class="text-center margin text-blue text-shadow">
      -- 已选专业班 --
    </view>
    <view style="margin-bottom: 80rpx">
      <view class="cu-card" v-for="item in ZLList" :key="item.CLASS_ID">
        <view class="cu-item shadow padding card-item" style="margin-top: 20rpx;margin-bottom: 10rpx;">
          <view class="cu-tag bg-green sm" v-if="item.SH_FLAG == '1'">{{item.SH_FLAGNR}}</view>
		  <view class="cu-tag bg-green sm" v-if="item.SH_FLAG == '0'">{{item.SH_FLAGNR}}</view>
          <view class="cu-list menu">
            <view class="cu-item">
              <!--                <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>-->
              <view class="content flex-sub">
                <view class="text-black text-bold">{{ item.CLASSNAME }}</view>
                <view class="text-gray text-sm flex">
                  <text>专业： {{item.MAJOR_NAME}}</text>
                </view>
                <view class="text-gray text-sm flex">
                  <text>开课时间： {{item.S_KK_DATE}}</text>
                </view>

                <view class="text-gray text-sm flex">
                  <text>上课时间： {{ item.SKSJSNR}}</text>
                </view>
								<view v-if="item.SH_FLAGNR">
									<text class="text-gray text-sm">审核状态:</text><view class="cu-tag bg-green sm" style="position: relative;">{{item.SH_FLAGNR}}</view>
								</view>
								<view v-if="item.STATENR">
									<text class="text-gray text-sm">报名表状态:</text><view class="cu-tag bg-green sm" style="position: relative;">{{item.STATENR}}</view>
								</view>
                <view class="text-gray text-sm flex margin-tb-xs">
                  <view class="cu-tag radius bg-red light" style="position: relative;margin-left: 0">{{ item.DSZ_FLAGNR }}</view>
                </view>
              </view>
            </view>

            <view class="cu-item">
              <view class="flex flex-direction text-red text-df">
                <view class="text-price">{{ getPrice(+item.SFJE1,false) }}<text class="text-sm margin-left-xs text-gray">低于50周岁</text></view>
                <view class="text-price">{{ getPrice(+item.SFJE2,false) }}<text class="text-sm margin-left-xs text-gray">50周岁（含）以上</text></view>
                <view class="text-sm text-red margin-tb-xs" v-if="item.ZZY_FLAG != '1'">不可转班</view>
              </view>

              <template v-if="item.ZZY_FLAG === '1'">
                <button class="cu-btn bg-purple round shadow margin-xs" @tap="toApplyZZY(item.CBM_ID)">
                  转班申请
                </button>
              </template>

            </view>
          </view>
        </view>
      </view>
      <load-more status="over"/>
    </view>
  </view>
</template>

<script lang="ts" setup>
import LoadMore from '../../components/loadmore/index.vue'
import {usePrice} from "../../utils/usePrice";
import {useUserEnrollList} from "./useUserEnrollList";
import {onBeforeUnmount, onMounted} from "vue";
import {useLogin} from "../account/useLogin";

const {getPrice} = usePrice()
const {ZLList,initUserEnrollList,enrollList} = useUserEnrollList()
const {hasEnroll} = useLogin()

onMounted(() => {
  if (!hasEnroll.value){
    uni.showModal({
      title: '提示',
      content: '尚未报名，请前往报名',
      showCancel: false,
      success: ({confirm}) => {
        if (confirm){
          uni.navigateBack()
        }
      }
    })
    return
  }

  initUserEnrollList()
  uni.$on('ZZYFinish',() => {
    initUserEnrollList()
  })
})

function toApplyZZY(CBM_ID: number){
  uni.navigateTo({
    url: `/pages/enroll/ZZY?CBM_ID=${CBM_ID}`
  })
}

onBeforeUnmount(() => {
  uni.$off('ZZYFinish')
})

</script>

<style scoped lang="scss">
.ZZYChoose{
  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom);  ///兼容 IOS<11.2/
  padding-bottom: env(safe-area-inset-bottom);  ///兼容 IOS>11.2/

  .card-item{
    position: relative;
    .cu-tag{
      position: absolute;
      right: 0;
      z-index: 2;
    }
  }
}
</style>
